<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="apple-touch-icon-114x114-precomposed.png" />
<meta name="viewport"
  content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<title></title>
<link href="/css/notepad.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/jquery-ui-1.8.17.custom.min.js"></script>
<script src="/js/handlebars.runtime.js"></script>
</head>
<body>
  <div id="menu">
    <a href="#">Topics</a>
    <a href="#">Note</a>
    <a href="#">Tasks</a>
  </div>
  <div id="header">
    <h1></h1>
  </div>
  <div id="body">
  </div>
  <div id="footer">
    Logged in as <span id="username"></span>
    <a href="#" class="logout">Sign out</a>
  </div>
</body>

<script id="noteEntry" type="">
  {{#with note}}
  <form action="" method="post">
    {{#htmlHidden id}}
    <div class="row">
      <label for="date">Date:</label>
      <div class="field">
        <s:text id="date" name="date" formatPattern="dd.MM.yyyy" class="selectOnFocus updateTitle" value="${actionBean.date}" />
      </div>
    </div>
  </form>
  {{/with}}
</script>

<script>
// Handlebars helpers
Handlebars.registerHelper("htmlHidden", function(name, value) {
  if (value) {
    return new Handlebars.SafeString('<html type="hidden" name="' + name + '" value="' + value + '"/>');
  }
});

$(document).ready(function() {
  function load(url, callback) {
    $.getJSON(url, callback);
  }
  
  function loadUserName() {
    load("/api/user/name", function(data) {
      $("#username").text(data);
    });
  }
  
  function loadNote() {
    
  }
  
  $(".selectOnFocus").focus(function() {
    this.setSelectionRange(0, $(this).val().length);
  });
  $("a").on("click", function(event) {
    event.preventDefault();
    if (!$(this).hasClass("delete") || confirm($(this).attr("title"))) {
      var now = new Date();
      document.location.href = $(this).attr("href") + "?t=" + now.getTime() + "&tzo=" + (now.getTimezoneOffset() / 60);
    }
  });
  window.scrollBy(0, document.getElementById("header").offsetTop);

  loadUserName();
  loadNote();
});
</script>
</html>
